import styled from "@emotion/styled";
import { Drawer, Button, Spin, Form, Select } from "antd";
import { useForm } from "antd/es/form/Form";
import FormItem from "antd/es/form/FormItem";
import Input from "antd/lib/input/Input";
import { IdSelect } from "components/id-select";
import { ErrorBox } from "components/lib";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { useDispatch } from "react-redux";
import { detailProject } from "service/project-list";
import { MjcResponseData } from "service/type";
import { useAddProject, useAsync } from "utils/index";
import { Project } from "./list";
import {
  projectListAction,
  selectprojectModalOpen,
  selectprojectopenModelId,
} from "./project-list.store";
import { useUsers } from "./user";
export const ProjectModel = () => {
  const dispatch = useDispatch();
  const projectModalOpen = useSelector(selectprojectModalOpen);
  const [form] = useForm();
  const { mutate, isError } = useAddProject();
  const { openModelId, type } = useSelector(selectprojectopenModelId);
  const { data: users } = useUsers();
  const [isOpen, setIsOpen] = useState(false);
  const {
    isLoading,
    data: Detail,
    run,
    error,
  } = useAsync<Project[]>(undefined, { thorwOnError: true });
  useEffect(() => {
    if (openModelId == 0) return;
    if (type != "edit") return;
    run(detailProject(openModelId));
    return () => {};
  }, [run, detailProject, openModelId]);
  const title = type == "edit" ? "编辑" : "创建项目";
  const onFinish = (formValue: any) => {
    mutate(formValue);
  };
  if (Detail && openModelId) {
    form.setFieldsValue(Detail[0]);
  } else {
    form.setFieldsValue({ name: "", organization: "", personId: "" });
  }
  return (
    <Drawer
      forceRender={true}
      onClose={() => {
        form.setFieldsValue({ name: "", organization: "", personId: 0 });
        dispatch(projectListAction.closeProjectModal());
      }}
      visible={projectModalOpen}
      width={"100%"}
    >
      <Container>
        {isLoading ? (
          <Spin size={"large"} />
        ) : (
          <>
            <h1>{title}</h1>
            <ErrorBox error={type == "edit" ? error : isError} />
            <Form
              layout="vertical"
              onFinish={onFinish}
              style={{ width: "40rem" }}
              form={form}
            >
              <Form.Item
                label={"名称"}
                name={"name"}
                rules={[{ required: true, message: "请输入项目名" }]}
              >
                <Input placeholder={"请输入项目名称"} value={"6666"} />
              </Form.Item>
              <Form.Item
                label={"部门"}
                name={"organization"}
                rules={[{ required: true, message: "请输入部门" }]}
              >
                <Input placeholder={"请输入部门名称"} />
              </Form.Item>
              <Form.Item
                label={"负责人"}
                name={"personId"}
                rules={[{ required: true, message: "请输入负责人" }]}
              >
                <Select placeholder="请选择">
                  <Select.Option disabled value={0}>
                    请选择
                  </Select.Option>
                  {users &&
                    users.map((item: any) => {
                      return (
                        <Select.Option key={item.id} value={String(item.id)}>
                          {item.name}
                        </Select.Option>
                      );
                    })}
                </Select>
              </Form.Item>
              <Form.Item style={{ textAlign: "right" }}>
                <Button loading={isLoading} type={"primary"} htmlType="submit">
                  提交
                </Button>
              </Form.Item>
            </Form>
          </>
        )}
      </Container>
    </Drawer>
  );
};
const Container = styled.div`
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`;
